<template>

  <div>

    <mu-list dense  textline="two-line" v-if="item.type === 0" >
      <mu-list-item  toggle-nested   value="item.path" slot="isNested ? 'nested' : 'default'" button nested="item.children && item.children.length > 0">
        <mu-list-item-content>
          <mu-list-item-title style=" 'font-size': '25px'">{{item.name}}</mu-list-item-title>
        </mu-list-item-content>
        <mu-list-item-action>
          <mu-icon class='toggle-icon' size='25' value='keyboard_arrow_down' />
        </mu-list-item-action>
      </mu-list-item>
        <mu-list-item v-if="item.type === 1" to="item.path" value="item.path" slot="default" button >
          <mu-list-item-content>
            <mu-list-item-title style=" 'font-size': '25px'">{{item.name}}</mu-list-item-title>
          </mu-list-item-content>
          <mu-list-item-action v-if="!item.children && item.badge">
            <mu-badge color='secondary' content="menu.badge"/>
          </mu-list-item-action>
        </mu-list-item>
        <main-menu-item v-if="item.type === 0" :item="item"></main-menu-item>
    </mu-list>
    <mu-list-item v-if="item.type === 1" to="item.path" value="item.path" slot="default" button >
      <mu-list-item-content>
        <mu-list-item-title style=" 'font-size': '25px'">{{item.name}}</mu-list-item-title>
      </mu-list-item-content>
      <mu-list-item-action v-if="!item.children && item.badge">
        <mu-badge color='secondary' content="menu.badge"/>
      </mu-list-item-action>
    </mu-list-item>


    <!--<mu-list-item v-if="item.type === 0"  value="item.path" slot="isNested ? 'nested' : 'default'" button nested="item.children && item.children.length > 0">-->
    <!--<mu-list-item-content>-->
    <!--<mu-list-item-title style=" 'font-size': '25px'">{{item.name}}</mu-list-item-title>-->
  <!--</mu-list-item-content>-->
    <!--<mu-list-item-action>-->
    <!--<mu-icon class='toggle-icon' size='25' value='keyboard_arrow_down' />-->
  <!--</mu-list-item-action>-->

    <!--<main-menu-item v-if="item.type === 0" nested-indent toggle-nested :item="c" v-for="c in item.children"-->
                    <!--:key="c.menuId"></main-menu-item>-->
    <!--</mu-list-item>-->
    <!--<mu-list-item v-if="item.type === 1" to="item.path" value="item.path" slot="default" button >-->
    <!--<mu-list-item-content>-->
    <!--<mu-list-item-title style=" 'font-size': '25px'">{{item.name}}</mu-list-item-title>-->
  <!--</mu-list-item-content>-->
      <!--<mu-list-item-action v-if="!item.children && item.badge">-->
    <!--<mu-badge color='secondary' content="menu.badge"/>-->
  <!--</mu-list-item-action>-->
        <!--</mu-list-item>-->



    <!--<mu-list-item v-if="item.type === 1" @click="clickShortCut(item)" button  slot="nested">-->
      <!--<mu-list-item-content>-->
        <!--<mu-list-item-title style="font-size: 16px; font-weight: 400 ">{{item.name}}</mu-list-item-title>-->
      <!--</mu-list-item-content>-->
    <!--</mu-list-item>-->

      <!--<mu-list-item v-if="item.type === 0" nested >-->
        <!--<mu-list-item-content>-->
          <!--<mu-list-item-title style="font-size:24px ; font-weight: 500">{{item.name}}</mu-list-item-title>-->
        <!--</mu-list-item-content>-->
        <!--<mu-list-item-action>-->
          <!--<mu-icon class='toggle-icon' size='24' value='keyboard_arrow_down'/>-->
        <!--</mu-list-item-action>-->
      <!--</mu-list-item>-->
      <!--<main-menu-item v-if="item.type === 0" nested-indent toggle-nested :item="c" v-for="c in item.list"-->
                      <!--:key="c.menuId"></main-menu-item>-->

    <!--<mu-list-item v-if="item.type === 1" @click="clickShortCut(item)" button :ripple="false" slot="nested">-->
      <!--<mu-list-item-content>-->
        <!--<mu-list-item-title style="font-size: 16px; font-weight: 500 ">{{item.name}}</mu-list-item-title>-->
      <!--</mu-list-item-content>-->
      <!--<mu-list-item-action>-->
        <!--<mu-badge color='secondary'/>-->
      <!--</mu-list-item-action>-->
    <!--</mu-list-item>-->
  </div>
</template>

<script>
  export default {
    name: 'main-menu-item',
    props: {
      item: {}
    },
    methods: {
      clickShortCut(item) {
        alert(JSON.stringify(item.url))
        this.$router.push({path: item.url})
      }
    }
  }
</script>

<style scoped>

</style>
